<script setup lang="ts">
import { reactive, ref } from 'vue';
import {orderService} from '@/service';
import { ElMessage } from 'element-plus';
import QRCode from 'qrcode'

const orderDetailDialogVisible = ref(false);
const payDialogVisible = ref(false);
const rechargeAmount = ref(5);
const codeBeanAmount = ref(5000);
const payQrCode = ref();

async function handleRechargeOrder() {
  // if(!userAgreementCheck.value){
  //   ElMessage({ type: 'error', message: '请先勾选用户协议' });
  //   return;
  // }
  await createRechargeOrder();
}

let timerId : any;
async function createRechargeOrder() {
  const res = await orderService.createOrder({
    orderName: "充值" + rechargeAmount.value + "元",
    orderType: 3,
    orderPrice: rechargeAmount.value,
  });
  if (res.success) {
    QRCode.toDataURL(res.result.qrCode)
      .then(code => {
        payQrCode.value = code;
      }).catch(err => {
      console.error(err)
    })
    orderDetailDialogVisible.value = false;
    payDialogVisible.value = true;
    timerId = setInterval(getOrderPayStatus, 3000, res.result.orderNo);
  } else {
    ElMessage({ type: 'error', message: res.errorMsg });
  }
}

async function getOrderPayStatus(orderNo:string) {
  const res = await orderService.getOrderPayStatus(orderNo);
  if (res.success) {
    if(res.result){
      payDialogVisible.value = false;
      clearInterval(timerId);
    }
  } else {
    ElMessage({ type: 'error', message: res.errorMsg });
  }
}

function changeAmount(amount: number) {
  codeBeanAmount.value = amount * 1000;
}

function open() {
  orderDetailDialogVisible.value = true;
}

defineExpose({ open });
</script>

<template>

  <!-- 充值订单详情弹框 -->
  <el-dialog v-model="orderDetailDialogVisible" :close-on-click-modal="false" title="订单详情" width="500" center>
    <div>
      <el-descriptions :column="1">
        <el-descriptions-item label="充值金额">
          <div>
            <el-radio-group v-model="rechargeAmount" @change="changeAmount">
              <el-radio value="0.8">0.8元</el-radio>
              <el-radio value="5">5元</el-radio>
              <el-radio value="10">10元</el-radio>
              <el-radio value="50">50元</el-radio>
              <el-radio value="300">300元</el-radio>
              <el-radio value="1000">1000元</el-radio>
            </el-radio-group>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="码豆数量"><em class="pay-price">{{codeBeanAmount}}</em> 个</el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleRechargeOrder">
          支付
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- order detail -->
  <el-dialog v-model="payDialogVisible" :close-on-click-modal="false" title="订单详情" width="500" @close="closeOrder">
    <div>
      <el-descriptions
        :column="1"
      >
        <el-descriptions-item label="充值金额"> {{ rechargeAmount }}元</el-descriptions-item>
        <el-descriptions-item label="码豆数量"><em class="pay-price">{{ codeBeanAmount }}</em> 个</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ new Date().toLocaleString() }}</el-descriptions-item>
      </el-descriptions>
      <el-tabs model-value="alipay">
        <el-tab-pane label="支付宝" name="alipay">
          <img :src="payQrCode" alt="">
          <div class="pay-tip">支付宝扫描上方二维码完成支付</div>
        </el-tab-pane>
        <!--        <el-tab-pane label="微信" name="wechat">
                  <div class="pay-tip">微信扫描上方二维码完成支付</div>
                </el-tab-pane>-->
      </el-tabs>
    </div>
  </el-dialog>

</template>

<style scoped lang="less">

</style>